<template>
	<view class="wrapper">
		<!-- 	<!--<view class="title-padding"></view>--> -->
		<!-- 		<view class="headerGd">
			<view class="header">
				<button class="back" @tap="back()"></button>
				商品分类
			</view>
		</view> -->
		<view class="clientSearchItem">
			<input class="search clientSearch" placeholder="输入机构编号/名称" v-model="searchValue"></input>
			<button class="button searchBt" @tap="searchGoodsType()">搜索</button>
		</view>

		<view class="goodTypeList">
			<view style="overflow-x: auto;">
				<view class="tabTitle" :style="{width:tdAllWidth+'px'}">
					<text v-for="(item,index) in tdHeaderList" :key="item.name" :style="{width:tdWidth[index]+'px'}">{{item.name}}</text>
				</view>
				<view class="goodTypeListContainer" :style="{height:bottomListHeight +'px',width:tdAllWidth+'px'}">
					<view class="goodTypeItem" v-for="(item,index) in department" :key="index" :style="{width:tdAllWidth+'px'}">
						<text :style="{width:tdWidth[0]+'px'}">{{index+1}}</text>
						<text :style="{width:tdWidth[1]+'px'}">{{item.BranchCode}}</text>
						<text :style="{width:tdWidth[2]+'px'}">{{item.BranchName}}</text>
						<text :style="{width:tdWidth[3]+'px'}">{{item.Address}}</text>
						<view :style="{width:tdWidth[4]+'px'}"><button @tap="openModel(1,item)"></button><button @tap="openModel(2,item)"></button></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flOptions">
			<button @tap="openModel(0)">新增</button>
		</view>
		<view class="Modal_Wrap" v-show="isShowDialog">
			<view class="Model">
				<view class="modelTitle">
					{{addOrChangeTitle}}
				</view>
		<!-- 		<view class="modelContains" v-if="addOrChangeType!=2">
					<text>部门编号</text><input placeholder="输入机构编号" v-model="BranchCode" />
				</view>
				<view class="modelContains" v-if="addOrChangeType!=2">
					<text>部门名称</text><input placeholder="输入机构名称" v-model="BranchName" />
				</view>
				<view class="modelContains" v-if="addOrChangeType!=2">
					<text>地址</text><input placeholder="输入地址" v-model="Address" />
				</view> -->
				<view class="cu-form-group" v-if="addOrChangeType!=2">
					<view class="title">机构编号：</view>
					<input class="inpt text-left" placeholder="输入机构编号" v-model="BranchCode"></input>
				</view>
				<view class="cu-form-group" v-if="addOrChangeType!=2">
					<view class="title">机构名称：</view>
					<input class="inpt text-left" placeholder="输入机构名称" v-model="BranchName"></input>
				</view>
				<view class="cu-form-group" v-if="addOrChangeType!=2">
					<view class="title">地址：</view>
					<input class="inpt text-left" placeholder="请输入地址" v-model="Address"></input>
				</view>
				<view class="modalOptions">
					<view @tap="cancel(0)">取消</view>
					<view @tap="cancel(1,addOrChangeType)">确认</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import * as Api from '@/syApis/syDa/syDa.js'
	export default {
		data() {
			return {
				//输入框的值
				searchValue: "",
				//底部列表滚动的高度
				bottomListHeight: 0,
				//进行操作的标识
				addOrChangeType: 0,
				//进行操作的标题
				addOrChangeTitle: "新增类别",
				//商品类别
				goodType: "",
				//弹框的显隐
				isShowDialog: false,
				//输入框的值
				goodTypeVaule: "1111",
				//当前新增或者修改的机构的ID
				BranchID: "",
				//部门列表
				department: [{
					bh: "D01",
					TypeName: "总部"
				}],
				//当前商品的名字
				goodTypeName: "",
				//td宽度列表
				tdWidth: [125, 125, 125, 125, 200],
				//tb表头
				tdHeaderList: [{
						name: "序号"
					},
					{
						name: "机构编号"
					}, {
						name: "机构名称"
					}, {
						name: "地址"
					}, {
						name: "操作"
					}
				],
				//机构编号
				BranchCode: "",
				//机构名称
				BranchName: "",
				//地址
				Address: ""
			}
		},
		created() {
			//获取屏幕高度uni.getSystemInfoSync().statusBarHeight
			var $this = this;
			this.bottomListHeight = uni.getSystemInfoSync().windowHeight - 100 - 50;
			this.Get_DepartmentMessage();
			uni.hideTabBar();
		},
		computed: {
			tdAllWidth() {
				var tdAllWidth = 0;
				this.tdWidth.forEach(item => {
					tdAllWidth += parseFloat(item);
				});
				// tdAllWidth += this.tdWidth.length - 1;
				return tdAllWidth;
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//关闭弹框
			cancel(state, type) {
				this.isShowDialog = false;
				if (state == 0) {
					this.goodType = "";
				}
				//删除操作
				if (type == 2 && state != 0) {
					this.deleteGoodsType();
				}
				//修改操作
				else if (type == 1 && state != 0) {
					this.changeGoodsType();
				}
				//新增操作
				else if (state != 0) {
					this.addGoodsTypeName();
				}
			},
			//开启弹框
			openModel(type, item) {
				this.isShowDialog = true;
				this.addOrChangeType = type;
				if (type == 0) {
					this.addOrChangeTitle = "新增机构";
					this.BranchID = "";
					this.BranchCode = "";
					this.BranchName = "";
					this.Address ="";
				} else if (type == 1) {
					this.addOrChangeTitle = "修改机构";
					this.BranchID = item.BranchID;
					this.BranchCode = item.BranchCode;
					this.BranchName = item.BranchName;
					this.Address = item.Address;
				} else {
					this.addOrChangeTitle = "确定删除吗？";
					this.BranchID = item.BranchID;
				}

			},
			//查询机构
			searchGoodsType() {
                if(this.searchValue==''){
					this.Get_DepartmentMessage();
				}else{
					let filter = "BranchName='"+this.searchValue+"'";
					this.Get_DepartmentMessage(filter);
				}
			},
			//删除机构
			deleteGoodsType() {
				let data = {
					"BranchID": this.BranchID
				}
				var that = this;
				Api.Delete_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else if (res.data.ErrorMsg == '获取登录信息失败') {} else {
							Api.showTip("删除成功");
							that.Get_DepartmentMessage();
						}
					}
				})
			},
			//新增机构
			addGoodsTypeName() {
				let CreateID = uni.getStorageSync("UserCode");
				let Save_M_Data_Json = {
					"CreateID": CreateID,
					"BranchCode": this.BranchCode,
					"BranchName": this.BranchName,
					"Address": this.Address
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var that = this;
				Api.Add_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != '') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							Api.showTip("新增成功");
							that.Get_DepartmentMessage();
						}
					}
				})

			},
			//修改机构
			changeGoodsType() {
				let CreateID = uni.getStorageSync("UserCode");
				let Save_M_Data_Json = {
					"BranchID": this.BranchID,
					"BranchCode": this.BranchCode,
					"BranchName": this.BranchName,
					"Address": this.Address,
					"CreateID": CreateID
				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json)
				}
				var that = this;
				Api.Update_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != '') {
							Api.showTip(res.data.ErrorMsg);
						} else {
							Api.showTip("修改成功");
							that.Get_DepartmentMessage();
						}
					}
				})
			},
			//获取全部部门
			Get_DepartmentMessage(filter) {
				if (filter === undefined) {
					filter = "";
				}
				let data = {
					Filter: filter
				}
				var _this = this;
				Api.Get_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip("获取登录信息失败");
							return;
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
							return;
						} else {

							_this.department = res.data.ResultMsg;
							_this.searchValue = "";
						}
					} else {
						Api.showTip("服务器开小差了");
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/*图标的大小*/
		$iconWidth:40upx;
		$iconHeight:40upx;
		$iconBackSize:40upx;
	
		.title-padding {
			height: var(--status-bar-height);
			background: $bb-bg-color;
			box-sizing: content-box;
		}
	
		button::after {
			border: none;
			padding: 0px;
		}
	
		body {
			width: 100%;
			height: 100%;
		}
	
		page {
			width: 100%;
			height: 100%;
		}
	
		.wrapper {
			width: 100%;
			height: 100%;
		}
	
		.headerGd {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background: $bb-bg-color;
			display: table;
			top: var(--status-bar-height);
	
			.header {
				position: relative;
				text-align: center;
				font-size: 32upx;
				color: #FFF;
	
				.back {
					width: $iconWidth;
					height: $iconHeight;
					background: url(../../static/back.png) no-repeat;
					position: absolute;
					left: 20upx;
					top: 30upx;
					background-size: $iconBackSize;
				}
	
			}
		}
	
		.search {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			background: #FFFFFF;
			padding-top: 10upx;
			border: 1px solid #ccc;
			box-sizing: border-box;
			display: flex;
			padding-left: 15upx;
			padding-right: 15upx;
	
			input {
				flex: 1;
				height: 80upx;
				display: inline-block;
				border: 1px solid #FFF;
				color: #999;
				border-radius: 10upx;
				border-top-right-radius: 0upx;
				border-bottom-right-radius: 0upx;
				padding-left: 10upx;
				background: #FFF;
	
			}
	
			text {
				display: inline-block;
				width: 120upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				border-radius: 10upx;
				padding-top: -10upx;
				background: #FFF;
				border-top-left-radius: 0upx;
				border-bottom-left-radius: 0upx;
				border-left: 1upx solid #999;
			}
		}
	
		.goodTypeList {
			width: 100%;
	
			.tabTitle {
				width: 100%;
				display: flex;
				flex-direction: row;
				background: rgb(124,170,216);
				color: #FFFFFF;
				border-bottom: 1px solid #C0C0C0;
	
				text {
					height: 80upx;
					line-height: 80upx;
					text-align: center;
					border-right: 1upx solid #FFF;
	
					&:nth-child(1) {
						width: 120upx;
						text-align: center;
	
					}
	
					&:last-child {
						width: 200upx;
						text-align: center;
	
						button {
							width: 80upx;
							height: 80upx;
							background: url(../../static/delete.png) no-repeat;
							background-size: 80upx;
						}
					}
	
					&:nth-child(2) {
						flex: 1;
					}
				}
			}
	
			.goodTypeListContainer {
				background: #E7EBED;
				overflow: auto;
	
				.goodTypeItem {
					width: 100%;
					display: flex;
					flex-direction: row;
					background: #EBEBEB;
					border-bottom: 1px solid #C7C7C7;
	
					text {
						height: 80upx;
						line-height: 80upx;
						text-align: center;
						border-right: 1px solid #C7C7C7;
	
						&:first-child {
							width: 120upx;
							text-align: center;
						}
	
						&:nth-child(2) {
							flex: 1;
						}
	
					}
	
					view {
						width: 200upx;
						text-align: center;
						display: flex;
	
						button {
							width: 40upx;
							height: 40upx;
							margin-top: 20upx;
							padding: 0upx;
	
							&:first-child {
								background: url(../../static/changeGood.png) no-repeat;
								background-size: 40upx;
							}
	
							&:last-child {
								background: url(../../static/deleteGoods.png) no-repeat;
								background-size: 40upx;
							}
	
						}
					}
				}
			}
	
		}
	
		.flOptions {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			display: flex;
			flex-direction: row;
			text-align: center;
			position: fixed;
			bottom: 0upx;
			left: 0upx;
	
			button {
				flex: 1;
				height: 100upx;
				border-radius: 0upx;
				line-height: 100upx;
				background: rgb(124,170,216);
				color: #FFF;
	
				&:first-child {
					border-right: 1px solid #FFF;
				}
			}
		}
	.clientSearchItem {
			width: 100%;
			height: 50px;
			display: flex;
			box-sizing: border-box;
			padding: 7.5px 5px 0px 5px;
		}
	
		.clientSearchItem .clientSearch {
			flex: 1;
			height: 35px;
			line-height: 35px;
			border-radius: 5px;
			border: 1px solid #ccc;
			border-top-right-radius: 0px;
			border-bottom-right-radius: 0px;
			padding-left: 8px;
			font-size: 14px;
		}
	
		.clientSearchItem .searchBt {
			width: 60px;
			height: 35px;
			line-height: 35px;
			font-size: 15px;
			border-top-left-radius: 0px;
			border-bottom-left-radius: 0px;
			background-color: rgba(124, 170, 216, 1);
			color: #FFF;
			background-color:#7CAAD8;
		}
		.Modal_Wrap {
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .2);
	
			.Model {
				position: absolute;
				background: #FFF;
				top: 50%;
				left: 10%;
				width: 80%;
				margin-top: -250upx;
				z-index: 99999;
				border: 1px solid #ebebeb;
				border-radius: 20upx;
				display: table;
	
				.modelTitle {
					width: 100%;
					line-height: 80upx;
					height: 80upx;
					text-align: center;
					font-size: 36upx;
					border-bottom: 1px solid #ebebeb;
				}
	
				.modelContains {
					box-sizing: border-box;
					font-size: 30upx;
					padding: 10upx 20upx;
	
					input {
						margin: 15upx 10upx;
						height: 38upx !important;
						line-height: 38upx !important;
						padding: 0upx;
						vertical-align: top;
					}
	
					text {
						height: 100%;
						line-height: 40upx;
						display: block;
					}
				}
					
				.modalOptions {
					width: 100%;
					height: 70upx;
					line-height: 70upx;
					display: flex;
	
					view {
						flex: 1;
						text-align: center;
						font-size: 30upx;
						border-top: 1px solid #ebebeb;
	
						&:first-child {
							border-right: 1px solid #ebebeb;
						}
					}
				}
	
			}
		}
</style>
